<template>
  <ContentWrap>
    <el-row :gutter="20" style="height: 100vh;">
      <el-col :span="6">
        <div class="grid-content flex flex-wrap gap-4" style="width: 100%;">
          <el-card style="width: 100% " shadow="always">
            <ExamProfileUser />
          </el-card>
          <el-card style="width: 100%" shadow="always">
            <el-descriptions title="刷题详情" :column="1" border>
              <el-descriptions-item
                label="总题数"
                label-align="right"
                align="center"
                label-class-name="my-label"
                class-name="my-content"
              >
                20
              </el-descriptions-item>
              <el-descriptions-item label="已答题数" label-align="right" align="center">
                3
              </el-descriptions-item>
              <el-descriptions-item label="开始时间" label-align="right" align="center">
                2024-10-29
              </el-descriptions-item>
              <el-descriptions-item label="Remarks" label-align="right" align="center">
                <el-tag size="small">School</el-tag>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12" >
        <div class="grid-content  " style="height: 100%;">
          <el-card style="width: 100%; height: 100%" shadow="always">
            <CodeQuestion preview-model="exam" :question-data="questionList"/>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content " style="height: 100%;">
          <el-card style="width: 100%; height: 100%" shadow="hover">Hover</el-card>
        </div>
      </el-col>
    </el-row>
  </ContentWrap>

</template>

<script setup lang="ts">
import ExamProfileUser from "@/views/Profile/components/ExamProfileUser.vue";
import CodeQuestion from "@/views/exam/center/member/bank/code/components/CodeQuestion.vue";
import {CodeQuestionVO} from "@/api/exam/question";
import {UserBankApi} from "@/api/exam/userbank";
const { params, name } = useRoute() // 查询参数
const questionList = ref<CodeQuestionVO[]>([]) // 列表的数据
/** 初始化 **/
onMounted(async () => {
  const id = params.id as unknown as number
  questionList.value = await UserBankApi.getMemberQuestionList({"id" : id});
  questionList.value.forEach(item=>{
    item.memberAnswer = {}
  })

})
</script>
<style scoped>
:deep(.my-label) {
  background: var(--el-color-success-light-9) !important;
}
:deep(.my-content) {
  background: var(--el-color-danger-light-9);
}
</style>
